<template>
  <div style="padding: 10px;">
    <el-row >
      <el-col>
        <div style="display: flex;">
          <div>
            <el-form :model="list_params" ref="searchForm"  size="small" :inline="true" @submit.native.prevent="() => handleQuery()">
              <el-form-item label="标题" prop="title">
                <el-input v-model="list_params.title" placeholder="标题搜索" ></el-input>
              </el-form-item>
              <el-form-item label="发送方式" prop="sendType">
                <el-select filterable  v-model="list_params.sendType">
                  <el-option :value="1" label="按用户发送"></el-option>
                  <el-option :value="2" label="按角色发送"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="记录类型" prop="recordType">
                <el-select filterable  v-model="list_params.recordType">
                  <el-option :value="1" label="手动发送"></el-option>
                  <el-option :value="2" label="系统发送"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="发送时间" prop="sendTime">
                <el-date-picker
                  v-model="list_params.sendTime"
                  type="daterange" value-format="yyyy-MM-dd" range-separator="~"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间">
                  </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleQuery" >搜索</el-button>
                <el-button @click="resetQuery" >重置</el-button>
                </el-form-item>
            </el-form>
          </div>
          <div style="flex: 1;"></div>
          <div>
            <!--            <el-button>删除</el-button>-->
            <!-- <el-button @click="handleExport">导出</el-button>
            <el-button>导入</el-button> -->
            <el-button type="primary" @click="addCustom" >添加</el-button>
          </div>
        </div>
      </el-col>
      <el-col>
        <div style="margin-top: 10px;">
          <el-table :data="table_data" @selection-change="handleSelectionChange"  :height="table_height">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="标题" prop="title"></el-table-column>
<!--            <el-table-column label="内容" prop="content"></el-table-column>-->
            <el-table-column label="发送方式" prop="sendTypeString"></el-table-column>
            <el-table-column label="记录类型" prop="recordType">
              <template slot-scope="scope" >
                {{scope.row.recordType==1?'手动发送':'系统发送'}}
              </template>
            </el-table-column>
            <el-table-column label="接收人" prop="userIdsString"></el-table-column>
            <el-table-column label="发送时间" prop="createTime"></el-table-column>
            <el-table-column label="操作" width="180" >

              <template slot-scope="scope" >
                <el-button
                  size="mini"
                  type="text"
                  @click="showInfo(scope.row)"
                >查看</el-button>
                <el-button
                  size="mini"
                  type="text"
                  @click="showStatus(scope.row)"
                >阅读状态</el-button>
                <el-popconfirm
                  title="确定删除吗？"
                  @confirm="c_delete(scope.row)"
                >
                  <el-button style="margin-left: 10px;"
                    slot="reference"
                    size="mini"
                    type="text"
                  >删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="list_total>0"
            :total="list_total"
            :page.sync="list_params.pageNum"
            :limit.sync="list_params.pageSize"
            @pagination="getList"
          />
        </div>
      </el-col>
    </el-row>
    <el-dialog  :visible.sync="add_custom_dialog_show" title="添加客户" width="680px" style="border-radius: 10px;" @close="close">
      <el-form  ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-row>

          <el-col :span="24">
            <el-form-item label="发送方式" prop="sendType">
              <el-select filterable  v-model="formData.sendType" @change="onSendTypeChange">
                <el-option :value="1" label="按用户发送"></el-option>
                <el-option :value="2" label="按角色发送"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="formData.sendType == 2">
            <el-form-item label="接收角色" prop="roleIds" :rules="[{ required: true, message: '请选择接收角色', trigger: 'change' }]">
              <el-select filterable  v-model="formData.roleIds" multiple collapse-tags >
                <el-option :value="1" label="平台用户"></el-option>
                <el-option :value="2" label="货主"></el-option>
                <el-option :value="3" label="档口"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="formData.sendType == 1">
            <el-form-item label="接收用户" prop="userIds" :rules="[{ required: true, message: '请选择接收用户', trigger: 'change' }]">
              <el-select filterable  v-model="formData.userIds" multiple collapse-tags >
                <el-option v-for="user in user_list" :value="user.userId" :label="user.nickName" ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="标题" prop="title">
              <el-input v-model="formData.title" placeholder="请输入标题"  show-word-limit clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="内容" prop="content">
              <editor v-model="formData.content" :min-height="192"/>

<!--              <el-input type="textarea"  v-model="formData.content" placeholder="请输入内容"  show-word-limit clearable-->
<!--                        :style="{width: '100%'}"></el-input>-->
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <div slot="title" style="background: #F3F4F6;margin: -20px;padding: 20px;height: 58px;border-radius: 10px;">{{formData.id?'编辑站内信':'发送站内信'}}</div>
      <div slot="footer" >
        <el-button @click="close" >取消</el-button>
        <el-button type="primary" @click="handleConfirm">{{formData.id?'编辑':'发送'}}</el-button>
      </div>
    </el-dialog>

    <el-dialog  :visible.sync="info_dialog_show" title="" width="680px" style="border-radius: 10px;" @close="close">
      <el-form   :model="info"  size="medium" label-width="100px">
        <el-row>

          <el-col :span="24">
            <el-form-item label="发送方式" prop="sendType">
              <div>
                <div v-if="info.sendType == 1">按用户发送</div>
                <div v-if="info.sendType == 2">按角色发送</div>
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="24" >
            <el-form-item label="接收用户" prop="userIds" >
              <div style="overflow: auto;max-height: 100px;">
                {{info.userIdsString}}
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="内容" prop="content">
<!--              <editor v-model="formData.content" :min-height="192"/>-->
              <div v-html="info.content" style="max-height: 400px;overflow: auto;" class="information-main-content"></div>
              <!--              <el-input type="textarea"  v-model="formData.content" placeholder="请输入内容"  show-word-limit clearable-->
              <!--                        :style="{width: '100%'}"></el-input>-->
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <div slot="title" style="background: #F3F4F6;margin: -20px;padding: 20px;height: 58px;border-radius: 10px;">{{info.title}} - 站内信</div>
    </el-dialog>
    <el-dialog :visible.sync="read_list_show" title="阅读状态">
      <el-table :data="read_list" height="500">
        <el-table-column label="用户" prop="receiverNickname"></el-table-column>
        <el-table-column label="状态" prop="readStatus" width="100">
          <template slot-scope="scope" >
            <div v-if="scope.row.readStatus == 1">已读</div>
            <div v-if="scope.row.readStatus == 0">未读</div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import { list, add, handleEnable, detail, update, del, send, read_status } from '@/api/base/message'
import { listUser } from "@/api/system/user";
import { getToken } from "@/utils/auth";
import { mapGetters } from 'vuex'
import store from '@/store'
export default {
  name: 'custom',
  dicts:['port_type'],
  ...mapGetters([
    'user_id'
  ]),
  data() {
    return {
      table_height:window.innerHeight - 300,
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      add_custom_dialog_show:false,
      edit_custom_dialog_show:false,
      table_data:[],
      tmp_data:[],
      formData:{
        name:'',
        category:'',
        enable:1,
        createBy:''
      },
      formDataInit:{
        name:'',
        category:'',
        enable:1,
        createBy:''
      },
      formEditData:{
        phoneNumber:'',
        customerName:'',
        customerNum:'',
        customerClassify:'',
        enable:1,
        data_enable:true,
        depositBank:'',
        accountName:'',
        account:'',
        pictures:'',
        createBy:''
      },
      pictures:[],
      rules:{
        title:[{
          required: true,
          message: '请输入消息标题',
          trigger: 'blur'
        }],
        content:[{
          required: true,
          message: '请输入消息内容',
          trigger: 'blur'
        }],
        sendType:[{
          required: true,
          message: '请选择发送方式',
          trigger: 'change'
        }],
      },
      ids:[],
      list_params:{
        pageNum:1,
        pageSize:10,
        title:'',
        sendType:'',
        sendTime:[]
      },
      list_total:0,
      user_list:[],
      info_dialog_show:false,
      info:{},
      read_list:[],
      read_list_show:false
    }
  },
  created() {
    this.getList()
    this.getUserList();

  },
  methods:{
    getUserList(){
      listUser({is_page:0}).then((res)=>{
        this.user_list = res.rows
        console.log(res.rows)
      })
    },
    getList(){
      let params = {...this.list_params}

      if (this.list_params.sendTime.length > 0){
        params.startTime = this.list_params.sendTime[0]+' 00:00:00'
        params.endTime = this.list_params.sendTime[1] + ' 23:59:59'
      }
      list(params).then(res => {
        this.table_data = res.rows;
        this.list_total = res.total;
      })
    },
    formatterData(row){
      return this.selectDictLabel(this.tmp_data,row.category+'');
    },
    addCustom(){
      this.add_custom_dialog_show = true;
      this.$refs['elForm'].resetFields();
      this.formData = {
        ...this.formDataInit
      }
    },
    close(){
      this.$refs['elForm'].resetFields();
      this.add_custom_dialog_show = false
      this.formData = this.formDataInit
    },
    handleConfirm(){
      if (this.formData.id){
        this.$message.info('功能暂未开放')
        return
      }
      this.$refs['elForm'].validate((valid)=>{
        if (valid){
          console.log(this.formData)

          send(this.formData).then((res)=>{
            this.add_custom_dialog_show = false
            this.getList()
          })
          this.$refs['elForm'].resetFields();
        }
      });
    },
    handleUpdate(){
      this.$refs['elEditForm'].validate((valid)=>{
        if (valid){
          let formData = this.formEditData;
          formData.createBy = store.getters.user_id;
          formData.enable = formData.enable?0:1

          this.edit_custom_dialog_show = false
          console.log(formData)
          update(formData).then(res=>{
            this.getList()
          })
          this.$refs['elEditForm'].resetFields();
        }
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    handleExport() {
      this.download('xnf/customer/export', {
        ...this.queryParams
      }, `customer${new Date().getTime()}.xlsx`)
    },
    handleEnable(enable){
      console.log(this.ids);
      if (this.ids.length == 0){
        this.$message({
          message: '请选择要操作的数据',
          type: 'warning'
        });
        return
      }
      handleEnable(this.ids,enable).then(res => {
        this.getList()
      })
    },
    editInfo(row){
      let id = row.id;
      console.log(row)
      // this.$message.info('功能暂未开放')
      this.formData = {
        ...row,
        roleIds:row.roleIds?row.roleIds.split(','):[],
        userIds:row.userIds?row.userIds.split(','):[]
      }
      console.log(this.formData)
      this.add_custom_dialog_show = true
      // detail(id).then(res => {
      //   this.formData = {
      //     ...this.formData,
      //     ...res.data,
      //     category: res.data.category+''
      //   }
      //   this.add_custom_dialog_show = true
      // })
    },
    field101BeforeUpload(){},
    c_delete(row){
      let id = row.id;
      del(id).then(res => {
        this.$message.success('删除成功')
        this.getList()
      })
    },
    handleQuery(){
      this.list_params.pageNum = 1;
      this.getList();
    },
    resetQuery(){
      this.$refs['searchForm'].resetFields();
      this.handleQuery()
    },
    onSendTypeChange(){
      this.formData = {
        ...this.formData,
        userIds:[],
        roleIds:[]
      }
    },
    showInfo(row){
      this.info = row;
      this.info_dialog_show = true
    },
    showStatus(row){
      this.read_list = []
      this.read_list_show = true
      read_status(row).then(res => {
        this.read_list = res.data
      })
    }
  }
}
</script>

<style scoped>
.information-main-content img{
  max-width: 100%;
  height: auto;
}
</style>
<style >
.information-main-content img{
  max-width: 100%;
  height: auto;
}
</style>
